<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" /> 
	<title>HTML5电子书翻页动画效果</title>
	<link rel="stylesheet" type="text/css" href="css/book.css">
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/book.js"></script>
</head>
<body>
	<section id="knowledge" class="viewBlock">
		<div class="bookBox">
			<a class="lastBtn"><</a>
			<a class="nextBtn">></a>
			<div class="bookPage frist">
				<img src="img/tp1.png" />
			</div>
			
			<div class="bookPage runPage">
				<div class="bookWord">
					<span id="dx">You can</span> see the beauty of the world.
					<span class="pageNumber">1</span>
				</div>
				<img src="img/tp2.png" />	
			</div>
			
			<div class="bookPage runPage">
				<div class="bookWord">				
					<span id="dx">Away</span> from all the hustle and bustle of the city.
					<span class="pageNumber">2</span>
				</div>
				<img src="img/tp3.png" />
			</div>
			
			<div class="bookPage runPage">
				<div class="bookWord">
					<span id="dx">Take a detour</span> and look at the scenery you may never have seen before.
					<span class="pageNumber">3</span>
				</div>
				<img src="img/tp4.png" />
			</div>
			<div class="bookPage last">
				<div class="bookWord">
					<span id="dx">You can see</span> the beauty of the world.</span>
					<span class="pageNumber">4</span>
				</div>
			</div>
		</div>
	</section>
</body>
</html>
